<template>
  <el-icon v-if="iconComponent">
    <component :is="iconComponent" />
  </el-icon>
</template>

<script setup lang="ts">
import { computed } from 'vue'

const props = defineProps({
  /**
   * 图标名称，例如: 'role', 'user-filled'
   * 如果为空或找不到对应的图标组件，则不显示图标
   */
  name: {
    type: String,
    default: '',
  },
})

// 根据图标名称获取组件名
const iconComponent = computed(() => {
  return getIconComponentName(props.name)
})

/**
 * 将图标名称转换为 Element Plus 图标组件名
 * @param iconName 图标名称，例如: 'role', 'user-filled'
 * @returns 组件名字符串，例如: 'Role', 'UserFilled'，如果无效则返回 null
 */
const getIconComponentName = (iconName: string | undefined | null): string | null => {
  if (!iconName || typeof iconName !== 'string' || iconName.trim() === '') {
    return null
  }
  // 将 icon 名称转换为首字母大写的组件名
  // 例如: 'role' -> 'Role', 'user-filled' -> 'UserFilled'
  const componentName = iconName
    .split('-')
    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
    .join('')

  return componentName
}
</script>
